<template>
	<view>
		<view>
			<image :src="get_img+'sys/blind/mhbj_two.png'" class="image"></image>
		</view>
		<view style="position: fixed;">
			<!-- <view class="gg">
				<view v-for="(item,index) in list2" :key="index">
					<view style="float: left;">
						<u-icon name="volume" size="40rpx" color="#CE8180"></u-icon>
					</view>
					<view>{{item.user.nickname}}抽中了{{item.goods.name}}元</view>
				</view>
			</view> -->
			<!-- <view class="yg">××月××日线上盲盒&nbsp;千分大礼包等你来拿！</view> -->
			<view class="ts">
				<!-- <view class="djs">活动倒计时02天03时10分48秒</view> -->
				<u-line color="#FF0000"></u-line>
				<view>
					<view class="mh" v-for="(item,index) in list1" :key="index">
						<!-- <u--image height="70rpx" width="70rpx" v-if="isindex != index" :src="get_img+'sys/blind/mh_one.png'"/> -->
						<!-- <u--image height="70rpx" width="70rpx" v-if="isindex == index" :src="get_img+'sys/blind/mh_tow.png'"> -->
						<image style="width: 70rpx;height: 70rpx;" :style='(isindex == index)?"filter:brightness(100%);":"filter:grayscale(100%);"'
						 :src="get_img+'sys/blind/mh_two.png'"></image>
					</view>
				</view>
				<view class="jindu">
					<view class="people">再邀请{{people_num}}人就可参与抽奖啦</view>
					<view class="jindutiao">
						<u-line-progress :percentage="percentage" :showText="false" height="5" activeColor="#F8DF62" inactiveColor="#A8A69F"></u-line-progress>
					</view>
				</view>
			</view>
			<view class="b1">
				<button class="button" type="button" @click="start_blind">
				</button>
			</view>
			<view class="b2">
				<button class="but2" open-type="share">邀请好友
				</button>
			</view>
			<view class="gz">
				<view style="color: #F8DF62;margin-top: -20rpx;">
					<u-tabs :list="list2" :scrollable='scrollable' :activeStyle='activeStyle' :inactiveStyle='inactiveStyle' lineColor='#F8DF62'
					 lineWidth='135rpx' @click="click"></u-tabs>
				</view>
				<view style="color: #F8DF62;font-size: 25rpx;margin: 10rpx;text-indent: 2em;">
					<p v-if="show == 0">{{sys.blind_rule}}</p>
					<p v-else>{{sys.deduction_invitation_rules}}</p>
				</view>
				<!-- <p style="text-align: center;color: #F8DF62;">活动规则</p>
				<p style="color: #F8DF62;font-size: 25rpx;margin: 10rpx;text-indent: 2em;">{{sys.blind_rule}}</p>
				<p style="text-align: center;color: #F8DF62;margin-top: 10rpx;">邀请规则</p>
				<p style="color: #F8DF62;font-size: 25rpx;margin: 10rpx;text-indent: 2em;">{{sys.blind_rule}}</p> -->
			</view>
		</view>
		<u-loading-page :loading="show1" loading-text="加载中..." loadingColor="#e8e8e8"></u-loading-page>
		<view style="position: fixed;">
			<view class="right_one" @click="go_list">抽奖记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1:false,
				get_img: this.$get_img,
				list: [{}, {}],
				list1: [],
				list2: [{
					name: '活动规则'
				}, {
					name: '邀请规则'
				}],
				isindex: 0,
				isopen: false, //判断盲盒是否停止变化
				goods_id: "",
				time: 100,
				open_blind: {},
				isclick: 1,
				user: {},
				sys: {},
				percentage: {},
				speed: {},
				people_num: '',
				activeStyle: {
					color: '#F8DF62'
				},
				inactiveStyle: {
					color: '#F8DF62'
				},
				show: 0,
				percentage: '',
				total: '',
				now: ''

			}
		},
		onShow() {
			this.get_goods()
			this.user = uni.getStorageSync("infor")
			this.sys = uni.getStorageSync("sys")

		},
		onLoad(option) {
			let that = this
			if (option.share_id) {
				this.show1=true
				setTimeout(() => {
					that.bind_invite(option.share_id)
				}, 3000)
			}
			this.get_speed()
		},
		methods: {
			bind_invite(id) {
				this.show1=false
				let that = this
				this.$model.get("user/task/bind_box_invite?uid=" + id).then(res => {
					if (res.code == 200) {
						uni.showModal({
							title: "已成功助力"
						})
					}
					
				})
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					// console.log(res.target)
				}
				// console.log("id", this.user.id);
				return {
					title: this.sys.deduction_invitation_rules,
					path: '/pages/blind_box/blind_go?id=' + this.user.id + "&type=bind_share",
					//  mpId: this.user.id,
					//  success(res) {
					//   console.log("res:",res)
					//   console.log("分享成功")
					// // let invite_uid = ""
					// // invite_uid = uni.getStorageSync("invite_uid")
					// console.log("user.id",this.user.id)
					//  }
				}

			},
			start_blind() {
				if (this.isopen) {
					return
				}
				this.isopen = true
				this.get_speed()
				let that = this
				this.$model.get("user/task/start_bind_box").then(
					res => {
						if (res.code == 200) {
							that.open_blind = res.data
							that.open()
							setTimeout(() => {
								that.isopen = false
							}, Math.ceil(Math.random() * (16 - 32) + 32) * 200)
						}
					})
			},
			open() {
				let that = this
				if (that.isopen) {
					if (that.isindex === 15) {
						that.isindex = 0
					} else {
						that.isindex++
					}
					if (that.isindex === 10) {
						that.time += 200
					}
					setTimeout(that.open, that.time)
				} else {
					uni.showModal({
						title: "奖品为：" + that.open_blind.name,
						showCancel: false,
						success() {
							/* uni.navigateTo({
								url: '/pages/blind_box/blind_give'
							}) */
							that.isindex = 0

						}

					})
					// console.log("id:", that.list1[that.isindex].id)
					that.goods_id = that.list1[that.isindex].id
				}
			},
			go_list() {
				uni.navigateTo({
					url: '/pages/blind_box/list/luck'
				})
			},
			get_goods() {
				this.$model.get("user/task/get_all_bind_goods").then(res => {
					if (res.code == 200) {
						this.list1 = res.data
						// console.log("list:", this.list)
					}
				})
			},
			get_speed() {
				let that = this
				this.$model.get("user/task/get_bind_progress").then(res => {
					if (res.code == 200) {
						that.total = res.data.total
						that.now = res.data.now
						let data = that.now / that.total
						that.percentage = parseInt(data * 100)
						that.people_num = parseInt(that.total - that.now)
						console.log("idata:", that.percentage)
					}
				})
			},
			click(item) {
				this.show = item.index
			}


		}
	}
</script>

<style>
	.image {
		width: 100vw;
		height: 100vh;
		z-index: -1;
		position: fixed;
	}

	.gg {
		margin: 10rpx 0 0 190rpx;
		color: #CE8180;
		width: 500rpx;
		height: 120rpx;
	}


	.yg {
		margin: 130rpx 0 0 175rpx;
		height: auto;
		width: 400rpx;
		background-color: #A70B0D;
		border-radius: 150rpx;
		color: #fff;
		text-align: center;
		font-size: 20rpx;
	}

	.ts {
		height: 550rpx;
		width: 500rpx;
		margin: 220rpx 0 0 125rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.djs {
		text-align: center;
		font-size: 30rpx;
		color: #961C21;
	}

	.mh {
		margin: 40rpx 0 0 40rpx;
		float: left;
	}

	.jh {
		text-align: center;
		font-size: 30rpx;
		margin: 480rpx 0 10rpx 0;
	}

	.button {
		/* background-image: url("@/static/icon/button_two.png"); */
		background-size: 250rpx 70rpx;
		height: 70rpx;
		background-color: rgba(255, 255, 255, .0);
	}

	.but2 {
		border-radius: 50rpx;
		height: 60rpx;
		background-color: #F8DF62;
		font-size: 25rpx;
		font-weight: 900;
		color: red;
	}

	.b2 {
		height: 60rpx;
		width: 250rpx;
		margin: 15rpx 0 0 250rpx;
		border-radius: 50rpx;
	}

	.b1 {
		height: auto;
		width: 250rpx;
		margin: 25rpx 0 0 250rpx;
	}



	.gz {
		height: 280rpx;
		width: 590rpx;
		margin: 25rpx 0 0 77rpx;
		border: 1px solid #F8DF62;
	}

	.right_one {
		height: auto;
		width: 130rpx;
		margin: 80rpx 0 0 620rpx;
		background-color: #fff;
		border-radius: 35rpx 0 0 35rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.jindu {
		text-align: center;
		font-size: 30rpx;
		margin: 480rpx 0 10rpx 0;
		width: 500rpx;
		height: 60rpx;
		color: #EEAA0A;
	}

	.people {
		font-size: 12px;
		margin-left: 10rpx
	}

	.jindutiao {
		width: 450rpx;
		height: 30rpx;
		margin-left: 25rpx;
		margin-top: 10rpx;
	}
</style>
